<template>
	<view>
		<view class="head back">
			<view class="head-filer text-small">
				<text class="text-color">团队概况</text>
				<text class="text-color">本月</text>
			</view>
			<view class="head-num">
				<view class="item">
					<text class="text-large">0.00</text><br>
					<text class="text-small">出单佣金（元）</text>
				</view>
				<view class="item">
					<text class="text-large">0.00</text><br>
					<text class="text-small">邀请佣金（元）</text>
				</view>
				<view class="item">
					<text class="text-large">0</text><br>
					<text class="text-small">团队人数</text>
				</view>
			</view>
			<view class="head-option">
				<view>推荐人：</view>
				<button>点击分享招募会员</button>
			</view>
		</view>
		<view class="body">
			<view class="body-check">
				<uni-segmented-control :current="current" :values="items" @clickItem="checkChange" style-type="text" active-color="#3edcff"></uni-segmented-control>
			</view>
			<view class="body-check-content">
				<view v-if="current === 0">
					<view class="body-check-content-tag">
						<text class="text-small">以下粉丝将为您索粉24小时，如果24小时内未开通，后续时间付款开通权限所得首页可能归其他人所有。</text>
					</view>
					<view class="body-check-content-list">
						<view v-if="content.length == 0" class="text-small none">暂时没有数据</view>
						<view v-else>
							内容
						</view>
					</view>
				</view>
				<view v-if="current === 1">
					待开发
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented-control.vue"
	export default {
		components: {
			uniSegmentedControl
		},
		data() {
			return {
				current: 0,
				items: ['潜在用户', '已开通会员'],
				content: []
			}
		},
		methods: {
			checkChange(e) {
				this.current = e.currentIndex;
			}
		}
	}
</script>

<style>
	.body-check-content view {
		width: calc(96vw);
		margin: 0 calc(2vw) 0 calc(2vw);
	}
	
	.none {
		text-align: center;
		line-height: 5;
		color: #999999;
	}

	.body-check-content-tag {
		color: red;
		border-bottom: 1px #E6E6E6 solid;
		padding: calc(1vh) 0 calc(1vh) 0;
		line-height: 1;
	}

	.head-option>view {
		width: calc(90vw);
		margin: calc(3vh) calc(3vw) calc(2vh) calc(3vw);
		padding: calc(1vw);
		height: calc(5vh);
		line-height: calc(5vh);
		border-radius: calc(1vw);
		background-color: #FFFFFF;
	}

	.head-option>button {
		width: calc(90vw);
		margin: calc(1vh) calc(3vw) calc(2vh) calc(3vw);
		height: calc(6vh);
		line-height: calc(6vh);
		border-radius: calc(1vw);
		background-color: #25acff;
		color: #FFFFFF;
	}

	.head-num {
		display: flex;
		text-align: center;
		color: #f1f1f1;
	}

	.item {
		flex: 1;
	}

	.head {
		width: calc(96vw);
		height: calc(34vh);
		border-radius: calc(2vw);
		margin: calc(2vh) calc(2vw) calc(2vh) calc(2vw);
	}

	.head-filer {
		display: flex;
		justify-content: space-between;
		padding: calc(2vh) calc(5vw) calc(2vh) calc(6vw);
	}

	.back {
		background-color: #3edcff;
	}

	.text-large {
		font-size: large;
	}

	.text-small {
		font-size: small;
	}
	
	.text-color {
		color: #FFFFFF;
	}
</style>
